<template>
    <div>
        <router-link tag="div" to="/" 
                     class="header-back"
                     v-show="showabs">
            <i class="iconfont back-icon">&#xe624;</i>
        </router-link>
        <div class="header-top"
             v-show="!showabs"
             :style="opacitystyle">景点详情
             <router-link to="/">
                <div class="iconfont back-top-icon">&#xe624;</div>
             </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'detailheader',
  data() {
      return {
          showabs:true,
          opacitystyle:{       //绑定的动态样式，样式写在这个对象里
              opacity:0,
          }
      }
  },
  methods: {
      handleScroll(){
          let top = document.documentElement.scrollTop  //获取浏览器滑动距上面的高度
          if (top < 50) {                   //通过判断高度来控制显示与隐藏
             this.showabs = true
          }else{
              let opacity = top / 130
              this.opacitystyle={opacity:opacity}                                 
              this.showabs = false 
          }
        //   console.log(document.documentElement.scrollTop)
      }
  },
  activated(){
      window.addEventListener('scroll',this.handleScroll)  //进入页面时触发，绑定的全局事件，整个页面都会触发这个钩子
  },
  deactivated() {
      window.removeEventListener('scroll',this.handleScroll)  //当离开页面或隐藏页面时触发，对全局事件解绑
  },  

}
</script>

<style scoped>
    .header-back{
        position: absolute;
        left: .2rem;
        top: .2rem;
        height: .8rem;
        line-height: .8rem;
        width: .8rem;
        text-align: center;
        border-radius: .4rem;
        background:rgba(0, 0, 0, .7)
    }
    .back-icon{
        color: #fff;
        font-size: .36rem;
    }
    .header-top{
        z-index: 2;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        overflow: hidden;
        height: .86rem;
        line-height: .86rem;
        text-align: center;
        color: #fff;
        background: #00bcd4;
        font-size: .32rem;
    }
    .back-top-icon{
        position: absolute;
        top: 0;
        left: 0;
        font-size: .4rem;
        width : .64rem;
        color: #fff;
    }
</style>